<template>
	<z-nav-bar :title="title" transparentTitle="auto" :isBlack="false"></z-nav-bar>
	<view class="add-player">
		<view class="flex_sbc">
			<view class="flex_fsc uni-mb-24">
				<view class="left-icon"></view>
				<view class="z-font-36 text-w">{{ title }}</view>
			</view>
			<!-- <view style="color: #FF0000;" @click="delPlayer">删除学员</view> -->
		</view>
		<view v-for="(item, index) in addList" :key="index">
			<view v-if="index" class="line"></view>
			<view class="add-item flex_fsc">
				<view class="uni-mr-56 flex_sh" v-html="item.label"></view>
				<input
					v-if="item.type === 'input'"
					:type="item.itype || 'text'"
					v-model="data[item.vMode]"
					:maxlength="item.maxlength || -1"
					type="text"
					:placeholder="item.placeholder"
					placeholder-class="uni-placeholder z-font-28"
				/>
				<view v-else-if="item.type === 'select'" class="flex_sbc width-100" @click="openRes(index)">
					<view v-if="index === 2">
						<view v-if="data[item.vMode]">{{ data[item.vMode] }}</view>
						<view v-else class="uni-placeholder">{{ item.placeholder }}</view>
					</view>
					<view v-else>
						<view v-if="item.res < 0" class="uni-placeholder">{{ item.placeholder }}</view>
						<view v-else>{{ gc.score[item.res] && gc.score[item.res].label }}</view>
					</view>
					<image
						:src="setting.oss_pub_domain + '/app-img/icon/icon_drop-down.png'"
						class="icon-size-32"
					></image>
				</view>
				<uni-datetime-picker type="date" v-else v-model="data[item.vMode]">
					<view class="flex_sbc width-100">
						<view v-if="data[item.vMode]">{{ data[item.vMode] }}</view>
						<view v-else class="uni-placeholder">{{ item.placeholder }}</view>
						<image
							:src="setting.oss_pub_domain + '/app-img/icon/icon_drop-down.png'"
							class="icon-size-32"
						></image>
					</view>
				</uni-datetime-picker>
			</view>
		</view>
	</view>
	<view class="add-player uni-mt-20 uni-mb-112">
		<view v-for="(item, i2) in addList2" :key="i2" class="add-item flex_fsc">
			<view class="uni-mr-88 flex_sh" v-html="item.label"></view>
			<view class="flex_fsc uni-mr-80" @click="switchRoid(i2, 0)">
				<uni-icons
					:type="data[item.vMode] == 0 ? 'circle-filled' : 'circle'"
					size="20"
					:color="data[item.vMode] == 0 ? '#008965' : '#C0C4CC'"
				></uni-icons>
				<view class="uni-ml-20">{{ item.select[0] }}</view>
			</view>
			<view class="flex_fsc" @click="switchRoid(i2, 1)">
				<uni-icons
					:type="data[item.vMode] == 1 ? 'circle-filled' : 'circle'"
					size="20"
					:color="data[item.vMode] == 1 ? '#008965' : '#C0C4CC'"
				></uni-icons>
				<view class="uni-ml-20">{{ item.select[1] }}</view>
			</view>
		</view>
	</view>
	<bottom-box :buts="buts" @change="submit"></bottom-box>
	<uni-popup ref="results" type="bottom">
		<view class="results-box">
			<view class="flex_sbc top">
				<view></view>
				<view v-if="editIndex === 2" class="z-font-32">选择分组</view>
				<view v-else v-html="addList[editIndex].label" class="z-font-32"></view>
				<uni-icons type="closeempty" size="20" color="#C4C7CC" @click="results.close()"></uni-icons>
			</view>
			<view v-if="editIndex === 2" class="uni-mx-32">
				<view class="flex_sbc flex_wrap">
					<view v-for="(gp, index) in groupList" :key="index" style="position: relative">
						<view
							class="grou-item uni-mb-16"
							:class="gp.name === group ? 'active' : 'no-active'"
							@click="selectResults(gp.name)"
						>
							{{ gp.name }}
						</view>
						<uni-icons
							v-if="index"
							type="clear"
							size="24"
							color="#FF0000"
							style="position: absolute; right: -8px; top: -8px"
							@click="delGroup(index)"
						></uni-icons>
					</view>
				</view>
				<view class="z-font-32 uni-mt-60">若没有分组可创建新分组</view>
				<input
					type="text"
					:placeholder="groupList.length >= 10 ? '分组最多10个' : '请输入组名'"
					v-model="group"
					class="group-input"
					placeholder-class="uni-placeholder"
					:disabled="groupList.length >= 10"
				/>
			</view>
			<view v-else>
				<view
					v-for="(item, rindex) in gc.score"
					:key="rindex"
					class="item flex_fsc"
					:class="selIndex === rindex ? 'active' : 'no-active'"
					@click="selectResults(rindex)"
				>
					<view class="left">{{ item.label }}</view>
					<view>{{ item.text }}</view>
				</view>
			</view>
			<!-- <view class="flex_cc res-button-box">
				<view class="button" @click="setResults">确定</view>
			</view> -->
			<bottom-box :buts="butsResults" @change="setResults" :fixed="false"></bottom-box>
		</view>
	</uni-popup>
</template>

<script setup>
import { addPlayer, editPlayer, getPlayerGroup, addPlayerGroup, delPlayerGroup } from '@/api/player';
import { globalConfigStore } from '@/stores/index';
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
const { proxy: that } = getCurrentInstance();

const eventChannel = that.getOpenerEventChannel();
const gc = globalConfigStore();
// 0 来自新建学员或编辑  1 来自选择学员组件新建学员
let pageSource = 0;
onLoad((opt) => {
	pageSource = parseInt(opt.ps || 0);
});

const groupList = ref([]);
getPlayerGroup().then((res) => {
	groupList.value = res;
});

const addList = reactive([
	{
		label: '<text style="color: #FA5151;">*</text>学员姓名',
		placeholder: '请输入学员姓名',
		type: 'input',
		vMode: 'name',
		maxlength: 11
	},
	{
		label: '联系方式',
		placeholder: '请输入联系方式',
		type: 'input',
		itype: 'number',
		maxlength: 11,
		vMode: 'phone'
	},
	{
		label: '学员分组',
		placeholder: '请选择',
		type: 'select',
		res: '',
		vMode: 'stuGroup'
	}
]);
const addList2 = reactive([
	{
		label: '性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：',
		select: ['男士', '女士'],
		vMode: 'sex'
	}
]);
function switchRoid(index, sindex) {
	data[addList2[index].vMode] = sindex;
}
const results = ref(''),
	editIndex = ref(0),
	selIndex = ref(0),
	group = ref('');
function openRes(index) {
	editIndex.value = index;
	// selIndex.value = addList[index].res;
	group.value = data.stuGroup;
	results.value.open();
}
function selectResults(index) {
	if (editIndex.value === 2) {
		group.value = index;
	} else {
		selIndex.value = index;
	}
}

const butsResults = [
	{
		label: '确定',
		bgColor: 'uni-color-main-bg'
	}
];
function setResults() {
	if (editIndex.value === 2) {
		if (!group.value) return that.tools.alert('请选择或输入分组');
		data[addList[editIndex.value].vMode] = group.value;
		that.$forceUpdate();
	} else {
		if (selIndex.value < 0) return that.tools.alert('请选择成绩');
		addList[editIndex.value].res = selIndex.value;
		data[addList[editIndex.value].vMode] = selIndex.value;
	}
	results.value.close();
}

const buts = [
	{
		label: '确定',
		bgColor: 'uni-color-main-bg'
	}
];

const data = reactive({
	sex: 0,
	type: 0,
	studyStatus: 1,
	name: '',
	career: '',
	phone: '',
	score: '',
	targetScore: '',
	classHours: '',
	stuGroup: '',
	expireTime: ''
});

Object.assign(data, uni.getStorageSync('player-profile') || {});
const title = data.id ? '编辑学员信息' : '新增学员';
// const sindex = addList.findIndex((item) => item.vMode === 'score');
// addList[sindex].res = data.score >= 0 ? data.score : -1;
// const tindex = addList.findIndex((item) => item.vMode === 'targetScore');
// addList[tindex].res = data.targetScore >= 0 ? data.targetScore : -1;

function submit(e) {
	const postData = JSON.parse(JSON.stringify(data));
	if (!postData.name) return that.tools.alert('请输入学员姓名');
	postData.expireTime = postData.expireTime ? postData.expireTime + ' 23:59:59' : '';
	const funName = postData.id ? editPlayer : addPlayer;
	funName(postData).then((res) => {
		const index = groupList.value.findIndex((item) => item.name == data.stuGroup);
		if (index < 0) addPlayerGroup({ name: data.stuGroup });
		eventChannel.emit('done', res);
		if (pageSource) return uni.navigateBack();
		if (data.id) {
			that.tools.alert('学员信息编辑完成');
			uni.navigateBack();
		} else {
			that.tools.alert('添加学员成功');
			uni.redirectTo({
				url: `/pages/player/details/details?id=${res.id}&new=1`
			});
		}
	});
}

function delGroup(index) {
	const { id, name } = groupList.value[index];
	uni.showModal({
		title: '删除提示',
		content: `${name}分组下可能包含其他学员，是否删除？`,
		success: (res) => {
			if (res.cancel) return;
			delPlayerGroup(id).then((res) => {
				groupList.value.splice(index, 1);
				group.value = '默认组'
			});
		}
	});
}

function delPlayer() {
	uni.showModal({
		title: '提示',
		content: '删除学员后将删除该学员所有信息，是否要删除',
		success: res => {
			if (res.cancel) return
			uni.navigateBack({
				delta: 3
			})
		}
	})
	
}
</script>

<style lang="scss">
@import 'add.scss';
</style>
